﻿@inherits AdminCompontentBase
<div @ref="Ref">
    <SSheetDialog Value="@_visible" ValueChanged="HandleVisibleChanged" Title="@T("Permission.ViewMessageTask")">
        <div id="@($"{Id}_dialog-box")" class="full-height d-flex">
            <div class="px-12 py-6 task-detail-left full-height flex-column">
                <AutoHeight Overflow>
                    <HeaderContent>
                        <div class="subtitle2 emphasis2--text">@T("DisplayName.MessageTaskHistory")</div>
                        <SDateRangePicker StartTime="_startTime" EndTime="_endTime" Attach="true" DateRangeChanged="OnDateChanged" Class="btn-fill-line mt-6 full-width" />
                        <div class="status-select mb-9">
                            <MSelect @bind-Value="@_queryParam.Status"
                                     Items="@(GetEnumList<MessageTaskHistoryStatuses>())"
                                     Label="@T("DisplayName.MessageTaskHistoryStatus")"
                                     ItemText="@(item => T($"DisplayName.MessageTaskHistoryStatus.{item.ToString()}"))"
                                     ItemValue="item => item"
                                                      Dense
                                                      Outlined
                                                      Clearable
                                     Attach="true"
                                     HideDetails="@("auto")"
                                     MenuProps="@(props => { props.OffsetY = true; })"
                                     Class="mt-6 justify-center"
                                     TItem="MessageTaskHistoryStatuses"
                                     TItemValue="MessageTaskHistoryStatuses"
                                     TValue="MessageTaskHistoryStatuses?"
                                     OnClearClick="Refresh"
                                     OnSelectedItemUpdate="Refresh">
                            </MSelect>
                        </div>
                    </HeaderContent>
                    <AutoHeightContent>
                        @if (_histories.Result.Any())
                        {
                            <div class="task-history-box">
                                <MTimeline Dense=false>
                                    @foreach (var item in _histories.Result)
                                    {
                                        <MTimelineItem Color="fill" Small FillDot Right @onclick="()=>HandleItemSelect(item)">
                                            <OppositeContent>
                                                @if (_historyInfo.Id == item.Id)
                                                {
                                                    <div class="btn emphasis--text mr-n5">@T($"DisplayName.MessageTaskHistoryStatus.{((MessageTaskHistoryStatuses)item.Status).ToString()}")</div>
                                                }
                                                else
                                                {
                                                    <div class="caption regular2--text mr-n5">@T($"DisplayName.MessageTaskHistoryStatus.{((MessageTaskHistoryStatuses)item.Status).ToString()}")</div>
                                                }
                                            </OppositeContent>
                                            <IconContent>
                                                <MessageTaskHistoryStatusIcon Size="@(_historyInfo.Id == item.Id?20:16)" Value="@item.Status" />
                                            </IconContent>
                                            <ChildContent>
                                                <div class="ml-n5">
                                                    @if (_historyInfo.Id == item.Id)
                                                    {
                                                        <div class="btn emphasis--text">@item.TaskHistoryNo</div>
                                                    }
                                                    else
                                                    {
                                                        <div class="caption regular--text">@item.TaskHistoryNo</div>
                                                    }
                                                    <div class="overline regular3--text">@item.SendTime?.ToOffset(JsInitVariables.TimezoneOffset).ToString(T("$DateTimeFormat"))</div>
                                                </div>
                                            </ChildContent>
                                        </MTimelineItem>
                                    }
                                </MTimeline>
                            </div>
                        }
                    </AutoHeightContent>
                    <FooterContent>
                        <SPagination Class="mt-5 d-flex" Page="@_queryParam.Page" PageSize="@_queryParam.PageSize" Total="_histories.Total" PageChanged="HandlePageChanged" PageSizeChanged="HandlePageSizeChanged" />
                    </FooterContent>
                </AutoHeight>
            </div>
            <span class="d-flex py-16" style="height: 100%">
                <MDivider Vertical />
            </span>
            <div class="task-detail-right full-height flex-column">
                <AutoHeight Overflow>
                    <HeaderContent>
                        @if (_historyInfo.Status == MessageTaskHistoryStatuses.WaitSend && _historyInfo.SendTime.HasValue)
                        {
                            <SButton BorderRadiusClass="rounded-lg" Class="small-btn info full-width mb-8">
                                <span>@T(string.Format(T("Description.MessageTaskHistory.SendTimeTips"),_historyInfo.SendTime?.ToOffset(JsInitVariables.TimezoneOffset).ToString(T("$DateTimeFormat"))))</span>
                            </SButton>
                        }
                    </HeaderContent>
                    <AutoHeightContent>
                        <div class="subtitle2 emphasis2--text">@T("MessageDetails")</div>
                        @if (_info.EntityType == MessageEntityTypes.Ordinary)
                        {
                            <OrdinaryMessageInfo MessageInfoId="_info.EntityId" MessageTask="_info"></OrdinaryMessageInfo>
                        }
                        @if (_info.EntityType == MessageEntityTypes.Template)
                        {
                            <TemplateMessageInfo MessageTemplateId="_info.EntityId" MessageTask="_info" Variables="_info.Variables"></TemplateMessageInfo>
                        }

                        <div class="subtitle2 emphasis2--text mt-8">@T("DisplayName.MessageTaskReceiver")</div>
                        <dl class="mt-8">
                            <dt class="overline regular3--text">@T("DisplayName.MessageTaskDetail.ReceiverType")</dt>
                            <dd class="body2 emphasis2--text mt-1">@T($"DisplayName.ReceiverType.{_info.ReceiverType.ToString()}")</dd>
                        </dl>

                        @if (_receiverUsers.Any())
                        {
                            <MCard Class="mx-auto overflow-y-auto mt-0 pa-0">
                                <MList>
                                    @foreach (var item in _receiverUsers)
                                    {
                                        <MListItem Class="px-0 py-4">
                                            <MListItemAvatar Size=40 Class="ma-0" Color="primary" Style="z-index:2">
                                                @if (string.IsNullOrEmpty(item.Avatar))
                                                {
                                                    <SEmptyAvatar Value="@item.DisplayName" />
                                                }
                                                else
                                                {
                                                    <MImage Src="@item.Avatar"></MImage>
                                                }
                                            </MListItemAvatar>
                                            <MListItemContent Class="ml-2 pa-0" Style="z-index:2">
                                                <MListItemTitle>
                                                    <span class="btn emphasis2--text">@(item.DisplayName)</span>
                                                    <div class="d-inline-flex mx-2" style="height: 8px">
                                                        <MDivider Vertical />
                                                    </div>
                                                    <span class="overline regular2--text">@T("DisplayName.SubjectTypes.User")</span>
                                                </MListItemTitle>
                                                <MListItemSubtitle>
                                                    <span class="body2 regular2--text">@(item.PhoneNumber)</span>
                                                    <div class="d-inline-flex mx-1" style="height: 8px">
                                                        <MDivider Vertical />
                                                    </div>
                                                    <span class="body2 regular2--text">@(item.Email)</span>
                                                </MListItemSubtitle>
                                            </MListItemContent>
                                        </MListItem>
                                    }
                                </MList>
                            </MCard>
                        }

                        @if (_info.Channel.Type == ChannelTypes.Sms || _info.SendRules.IsCustom)
                        {
                            <div class="subtitle2 emphasis2--text mt-8">@T("DisplayName.MessageTaskSendingRule")</div>
                        }
                        @if (_info.Channel.Type == ChannelTypes.Sms)
                        {
                            <dl class="mt-8">
                                <dt class="overline regular3--text">@T("DisplayName.MessageTemplateSign")</dt>
                                <dd class="body2 emphasis2--text mt-1">@_info.Sign</dd>
                            </dl>
                        }
                        @if (_info.SendRules.IsCustom)
                        {
                            <MessageSendingRulesInfo Value="_info.SendRules" />
                        }
                    </AutoHeightContent>
                    <FooterContent>
                        @if (_info.Channel.Type == ChannelTypes.WebsiteMessage && _historyInfo.Status != MessageTaskHistoryStatuses.Withdrawn)
                        {
                            <div Class="d-flex pt-2">
                                <MSpacer></MSpacer>
                                <SButton Class="px-6" Width="100" OnClick="HandleWithdrawnAsync">
                                    <span>@T("Withdraw")</span>
                                </SButton>
                            </div>
                        }
                    </FooterContent>
                </AutoHeight>
            </div>
        </div>
    </SSheetDialog>
</div>